<template>
    <div>
        <div>
            <div class="login_views" :style="{ backgroundImage: backgroundImage }">
                <el-button class="button" color="#FFFFFF" @click="drawer = true">
                    登录
                </el-button>
                <el-button class="button" color="#FFFFFF" @click="drawerzhuce = true">
                    注册
                </el-button>
                <el-button class="button" color="#FFFFFF" @click="drawerTop = true">
                    切换背景
                </el-button>
                <!-- 切换背景 -->
                <el-drawer v-model="drawerTop" :direction="direction" :with-header="false">
                    <div class="demo-image">
                        <div v-for="(item, index) in fileNameList" :key="item" class="block">
                            <div class="demo_image" :id="isOpen == index ? 'open' : ''" @click="handleIsOpen(index)">
                                <img style="width: 200px; height: 110px" :src="item" />
                            </div>
                        </div>

                    </div>
                </el-drawer>
                <!-- 登录 -->
                <el-drawer v-model="drawer" :with-header="false">
                    <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign"
                        style="max-width: 460px">
                        <h1>管理后台学习</h1>
                        <el-form-item label="账户">
                            <el-input v-model="formLabelAlign.name" />
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" v-model="formLabelAlign.pass" />
                        </el-form-item>
                        <el-form-item>
                            <el-button v-if="!isLode" style="width: 190px;" type="primary" @click="onSubmit">登 录</el-button>
                            <el-button v-else style="width: 190px;" type="primary">登录中<el-icon class="is-loading">
                                    <Loading />
                                </el-icon></el-button>

                        </el-form-item>
                    </el-form>
                </el-drawer>
                <!-- 注册 -->
                <el-drawer v-model="drawerzhuce" :with-header="false">
                    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                        :size="formSize" status-icon>
                        <el-form-item label="用户名" prop="name">
                            <el-input v-model="ruleForm.name" />
                        </el-form-item>
                        <el-form-item label="电话" prop="phone">
                            <el-input type="number" v-model="ruleForm.phone" />
                        </el-form-item>
                        <el-form-item label="角色" prop="jiaose">
                            <el-select v-model="ruleForm.jiaose" class="m-2" placeholder="Select" style="width: 190px;">
                                <el-option label="管理员" value="管理员" />
                                <el-option label="普通用户" value="普通用户" />

                            </el-select>
                        </el-form-item>
                        <el-form-item label="密码" prop="pass">
                            <el-input type="password" v-model="ruleForm.pass" />
                        </el-form-item>
                        <el-form-item label="确认密码" prop="pass1">
                            <el-input type="password" v-model="ruleForm.pass1" />
                        </el-form-item>
                        <el-form-item>
                            <el-button v-if="!isLode" style="width: 190px;" type="primary"
                                @click="onSubmitzhuce(ruleFormRef)">注 册</el-button>
                            <el-button v-else style="width: 190px;" type="primary">注册中<el-icon class="is-loading">
                                    <Loading />
                                </el-icon></el-button>

                        </el-form-item>
                    </el-form>
                </el-drawer>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
import axios from 'axios'

const router = useRouter()
// 登录输入框
const labelPosition = ref('right')
// form表单的所有字段
const formLabelAlign = reactive({
    name: '',
    pass: '',
});
// 顶部弹窗
const drawerTop = ref(false)
const direction = ref('ttb')
// 右边弹窗
const drawer = ref(false)
import bgA from "../assets/img/bg.jpeg"
import bgB from "../assets/img/bg1.jpeg"
import bgC from "../assets/img/bg2.jpeg"
import bgD from "../assets/img/bg3.jpeg"
import bgE from "../assets/img/bg4.jpeg"
// 调用公共方法
import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance()
const { $common, $config } = proxy

// 展示图片选择
const fileNameList = ref([bgA, bgB, bgC, bgD, bgE])
// 默认值
const backgroundImage = ref('')
// 背景默认图
const isOpen = ref(0)
// 默认打开上次背景
backgroundImage.value = `url('${fileNameList.value[$common.$getStorage("backgroundImage") || 0]}')`
isOpen.value = $common.$getStorage("backgroundImage") || 0

// 选择背景
const handleIsOpen = (e: number) => {
    isOpen.value = e
    // 根据选择切换背景
    backgroundImage.value = `url('${fileNameList.value[e]}')`
    $common.$setStorage("backgroundImage", e)
}
// 加载数据
const isLode = ref(false)
// 登录
// 查看上次登录记录，快捷登录
if ($common.$getStorage("newID")) {
    formLabelAlign.name = JSON.parse($common.$getStorage("newID")).name
    formLabelAlign.pass = JSON.parse($common.$getStorage("newID")).pass
}
const onSubmit = () => {
    axios({
        method: "get",
        url: $config.envUrl + "/login/on",
        params: { userName: formLabelAlign.name, userPass: formLabelAlign.pass }
    }).then((res: any) => {
        if (res.data.code == 200) {
            ElMessage({
                message: '登录成功',
                type: 'success',
            })

            //  缓存上次登录账号
            $common.$setStorage("newID", JSON.stringify(formLabelAlign))
            // 保存token，登录权限
            $common.$setseSsionStorage("TOKEN", res.data.token)
            drawerzhuce.value = false
            router.push({
                name: 'Index'
            })

            // 当前用户信息存储
            $common.$setseSsionStorage("userId", res.data.id)

            
        } else {
            console.log(res)
            ElMessage.error(res.data.msg)
        }
    })


}
// 注册弹窗
const drawerzhuce = ref(false)
import type { FormInstance, FormRules } from 'element-plus'
interface RuleForm {
    name: string
    pass: string
    pass1: string
    phone: string
    jiaose: string
}

const ruleForm = reactive<RuleForm>({
    name: '',
    pass: "",
    pass1: "",
    jiaose: "普通用户",
    phone: ""

})
const ruleFormRef = ref<FormInstance>()
const formSize = ref('default')
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    jiaose: [
        { required: true, message: '请输入用户名', trigger: 'change' },
    ],
    phone: [
        { required: true, message: '请输入电话', trigger: 'blur' },
    ],
    pass: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '请输入6到18位的密码', trigger: 'blur' },
    ],
    pass1: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        { min: 6, max: 18, message: '请输入6到18位的密码', trigger: 'blur' },
    ],
})
// 点击注册
const onSubmitzhuce = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios({
                method: "POST",
                url: $config.envUrl + "/login/add",
                data: { userName: ruleForm.name, userPass: ruleForm.pass, phone: "15214006828", position: ruleForm.jiaose }
            }).then((res: any) => {
                if (res.data.code == 200) {
                    ElMessage({
                        message: '注册成功',
                        type: 'success',
                    })
                    drawerzhuce.value = false
                } else {
                    console.log(res)
                    ElMessage.error(res.data.msg)
                }

            })

        } else {
            ElMessage.error('请填写完整!')

        }
    })
}



</script>

<style lang="scss" scoped>
// 公共样式
.login_views {
    // background-color: aqua;
    background: url(../assets/img/bg.jpeg) no-repeat center;
    background-position: center;
    background-size: 100%;
    height: 100vh;

    .button {
        float: right;
        margin: 10px;
    }

    .el-form {
        background-color: #fff;
        padding: 20px;
        padding-right: 60px;
        border-radius: 10px;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        h1 {
            font-size: 16px;
            margin: 30px;
        }
    }
}

// 图片排列样式
.demo-image .block {
    padding: 30px 0;
    text-align: center;
    //   border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    vertical-align: top;
}

.demo-image .block:last-child {
    border-right: none;
}

.demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.demo_image {

    width: 250px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;


}

#open {
    border: 2px solid #333;

}
</style>